<template>
  <div>
    <!-- echarts -->
    <div id="main" style="width: 500px; height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from '@/utils/request'
export default {
  data() {
    return {
      textArr: [],
      codeIdArr: [],
      pieArr: [],
    }
  },
  async created() {},
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await axios.get('/api/code')
      console.log('res:', res.data.data)
      const data = res.data.data
      data.forEach((item) => {
        // this.textArr.push(item.text)
        // this.codeIdArr.push(item.codeId)
        this.pieArr.push({
          value: item.codeId,
          name: item.text,
        })
      })
      this.drawLine()
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'))
      // setTimeout(() => {
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        xAxis: {
          data: this.textArr,
        },
        yAxis: {},
        series: [
          {
            type: 'pictorialBar',
            name: 'pictorial element',
            z: 10,
            data: [
              {
                value: 60,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolPosition: 'end', //图形边缘与柱子结束的地方内切
                symbolSize: ['-95%', 90], //根据柱子大小来做调整
                itemStyle: {
                  normal: {
                    color: '#FEE47B',
                  },
                },
              },
            ],
          },
          {
            type: 'bar',
            name: 'reference bar',
            barGap: '-100%',
            // symbol: 'image://' + params.picture, // 图片自己切或者让UI设计切喔
            symbolOffset: [0, 0],
            z: 2,
            // itemStyle: { // 有图就别用渐变了哈，图片更真实
            //   color: {
            //     x: 1,
            //     y: 0,
            //     x2: 0,
            //     y2: 0,
            //     type: 'linear',
            //     global: false,
            //     colorStops: [
            //       { offset: 0, color: '#bd530a' },
            //       { offset: 0.5, color: '#bd530a' },
            //       { offset: 0.5, color: '#ca7e06' },
            //       { offset: 1, color: '#ca7e06' }
            //     ]
            //   }
            // },
            data: [60],
          },
          {
            type: 'pictorialBar',
            name: 'joy',
            barGap: '-100%',
            z: 3,
            data: [
              {
                value: 10,
                symbol: 'triangle',
                symbolOffset: [0, 40],
                symbolSize: ['-100%', 40],
                symbolRotate: 180,
                itemStyle: {
                  color: {
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      { offset: 0, color: '#bd530a' },
                      { offset: 0.5, color: '#bd530a' },
                      { offset: 0.5, color: '#ca7e06' },
                      { offset: 1, color: '#ca7e06' },
                    ],
                  },
                },
              },
            ],
          },
        ],
      })
    },
  },
}
</script>

<style></style>
